<template>
    <div class="command">
        <div class="top strong-font">评论 {{ contentVo.commentNum }}</div>
        <div class="add">
            <el-avatar
                class="avatar"
                :size="40"
                :src="userInfo.avatar ? userInfo.avatar : avatar"
            />
            <div class="add-input">
                <textarea
                    v-model="commentAddRO.comment"
                    class="command-input"
                    :placeholder="replyName ? '回复' + replyName : '平等表达 友善交流'"
                />
                <el-image
                    v-for="(url, index) in urls"
                    :key="index"
                    style="width: 50px; height: 50px; margin-right: 10px"
                    :src="url"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="urls"
                    :initial-index="index"
                    fit="cover"
                />
                <div class="send">
                    <el-upload
                        :auto-upload="false"
                        multiple
                        :show-file-list="false"
                        :on-change="uploadImg"
                    >
                        <el-icon class="icon">
                            <Picture />
                        </el-icon>
                    </el-upload>
                    <el-button style="margin-left: auto" type="primary" @click="sendComment"
                        >发送
                    </el-button>
                </div>
            </div>
        </div>
        <div class="command-chick-top">
            <span class="tap-left">最热</span>
            <span class="tap-right chick">最新</span>
        </div>
        <div class="command-context">
            <LoadingComponent :show-loading="showLoading" class="command-item" />
            <div v-for="comment in comments.data" :key="comment.id" class="command-item">
                <el-avatar
                    class="avatar"
                    :size="32"
                    :src="comment.avatar ? comment.avatar : avatar"
                />
                <div style="width: 100%">
                    <div class="command-item-top">
                        <span>{{ comment.createUserName }}</span>
                    </div>
                    <div class="command-item-content">
                        {{ comment.comment }}
                    </div>
                    <div class="image">
                        <el-image
                            v-for="(url, index) in getUrls(comment.images)"
                            :key="index"
                            class="showImage"
                            :src="url"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="getUrls(comment.images)"
                            :initial-index="index"
                            fit="cover"
                        />
                    </div>
                    <div class="command-item-end">
                        <span class="command-item-end-font" style="padding-left: 0">{{
                            formatTime(comment.createTime)
                        }}</span>
                        <span class="command-item-end-font" @click="chickSupport(comment)">
                            <svg
                                v-if="comment.support"
                                width="15"
                                height="15"
                                viewBox="0 0 48 48"
                                fill="none"
                                class="chickSuccess"
                            >
                                <path
                                    d="M36.222 40.303l5.949-18.697A2 2 0 0040.265 19l-13.133.075L28.5 15.5c.964-2.52 3.172-5.9 1-7.5l-1.711-1.419a1 1 0 00-1.386.196L17 19h-3v22h21.269a1 1 0 00.953-.697z"
                                    fill="currentColor"
                                />
                                <path
                                    d="M7 17v26m35.17-21.394l-5.948 18.697a1 1 0 01-.953.697H14V19h3l9.403-12.223a1 1 0 011.386-.196L29.5 8c2.172 1.6-.036 4.98-1 7.5l-1.368 3.575L40.265 19a2 2 0 011.906 2.606z"
                                    stroke="#1e80ff"
                                    stroke-width="4"
                                    fill="currentColor"
                                />
                            </svg>
                            <svg v-else width="15" height="15" viewBox="0 0 48 48" fill="none">
                                <path
                                    d="M7 17v26m35.17-21.394l-5.948 18.697a1 1 0 01-.953.697H14V19h3l9.403-12.223a1 1 0 011.386-.196l2.535 1.87a6 6 0 012.044 6.974L31 19h9.265a2 2 0 011.906 2.606z"
                                    stroke="#4E5969"
                                    stroke-width="2"
                                />
                            </svg>
                        </span>
                        <span>{{ comment.kudosNum > 0 ? comment.kudosNum : '点赞' }}</span>
                        <span
                            class="command-item-end-font comment-icon"
                            @click="replyUser(comment)"
                        >
                            <el-icon><ChatDotSquare style="color: #919698" /></el-icon>
                        </span>
                        <span class="comment-icon" style="float: right">
                            <el-icon><MoreFilled style="color: #919698" /></el-icon>
                        </span>
                    </div>
                    <div
                        v-for="commentSon in comment.sonComment"
                        :key="commentSon.id"
                        class="command-item-son"
                    >
                        <el-avatar
                            class="avatar"
                            :size="28"
                            :src="commentSon.avatar ? commentSon.avatar : avatar"
                        />
                        <div style="width: 100%">
                            <span class="command-item-top command-item-son-name">
                                <span v-if="commentSon.replyId">
                                    {{ commentSon.createUserName }} 回复 @{{
                                        commentSon.replyName
                                    }}:</span
                                >
                                <span v-else>{{ commentSon.createUserName }}: </span>
                            </span>
                            <span class="command-item-son-content">
                                {{ commentSon.comment }}
                            </span>
                            <div class="image">
                                <el-image
                                    v-for="(url, index) in getUrls(commentSon.images)"
                                    :key="index"
                                    class="showImage"
                                    :src="url"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    :preview-src-list="getUrls(commentSon.images)"
                                    :initial-index="index"
                                    fit="cover"
                                />
                            </div>
                            <div class="command-item-end">
                                <span class="command-item-end-font" style="padding-left: 0">
                                    {{ formatTime(commentSon.createTime) }}</span
                                >
                                <span
                                    class="command-item-end-font"
                                    @click="chickSupport(commentSon)"
                                >
                                    <svg
                                        v-if="commentSon.support"
                                        width="15"
                                        height="15"
                                        viewBox="0 0 48 48"
                                        fill="none"
                                        class="chickSuccess"
                                    >
                                        <path
                                            d="M36.222 40.303l5.949-18.697A2 2 0 0040.265 19l-13.133.075L28.5 15.5c.964-2.52 3.172-5.9 1-7.5l-1.711-1.419a1 1 0 00-1.386.196L17 19h-3v22h21.269a1 1 0 00.953-.697z"
                                            fill="currentColor"
                                        />
                                        <path
                                            d="M7 17v26m35.17-21.394l-5.948 18.697a1 1 0 01-.953.697H14V19h3l9.403-12.223a1 1 0 011.386-.196L29.5 8c2.172 1.6-.036 4.98-1 7.5l-1.368 3.575L40.265 19a2 2 0 011.906 2.606z"
                                            stroke="#1e80ff"
                                            stroke-width="4"
                                            fill="currentColor"
                                        />
                                    </svg>
                                    <svg
                                        v-else
                                        width="15"
                                        height="15"
                                        viewBox="0 0 48 48"
                                        fill="none"
                                    >
                                        <path
                                            d="M7 17v26m35.17-21.394l-5.948 18.697a1 1 0 01-.953.697H14V19h3l9.403-12.223a1 1 0 011.386-.196l2.535 1.87a6 6 0 012.044 6.974L31 19h9.265a2 2 0 011.906 2.606z"
                                            stroke="#4E5969"
                                            stroke-width="2"
                                        />
                                    </svg>
                                </span>
                                <span>{{
                                    commentSon.kudosNum > 0 ? commentSon.kudosNum : '点赞'
                                }}</span>
                                <span
                                    class="command-item-end-font comment-icon"
                                    @click="replyUser(commentSon)"
                                >
                                    <el-icon><ChatDotSquare style="color: #919698" /></el-icon>
                                </span>
                                <span class="comment-icon" style="float: right">
                                    <el-icon><MoreFilled style="color: #919698" /></el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                v-if="comments.data && comments.data.length != comments.total"
                class="unfold"
                @click="showAll"
            >
                <span> 查看全部的 {{ contentVo.commentNum }} 条 </span>
                <el-icon style="margin-left: 5px; vertical-align: middle">
                    <ArrowDown />
                </el-icon>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';

    export default defineComponent({
        name: 'CommentIndex'
    });
</script>

<script lang="ts" setup>
    import { useUserStore } from '@/store/user';
    import { ref, watch } from 'vue';
    import { addComment, getCommentPage, support } from '@/api/content/comment/api';
    import { CommentAddRO, CommentPageVO } from '@/api/content/comment/comment';
    import { PageVO } from '@/api/common';
    import LoadingComponent from '@/components/LoadingComponent.vue';
    import formatTime from '../../../utils/formatTime';
    import { ArrowDown, ChatDotSquare, MoreFilled } from '@element-plus/icons-vue';
    import { UploadFile } from 'element-plus';
    import { upload } from '@/api/file/api';
    import { FileType, UploadType } from '@/api/file/file';
    import { ContentVO } from '@/api/content/content/content';

    const avatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
    const userInfo = useUserStore();
    const props = defineProps<{ contentVo: ContentVO }>();
    const comments = ref<PageVO<CommentPageVO>>({});
    const input = ref<string>('');
    const showLoading = ref(true);
    const showUnfold = ref(true);
    const urls = ref<string[]>([]);
    let files: Blob[] = [];
    const commentAddRO = ref<CommentAddRO>({
        contentId: '',
        comment: '',
        images: ''
    });

    async function sendComment() {
        let data;
        if (files.length > 0) {
            const res = await upload({
                uploadType: UploadType.LOCAL,
                multipartFiles: files,
                fileType: FileType.COMMENT_IMG
            });
            data = res.data;
        }
        addComment({
            ...commentAddRO.value,
            contentId: props.contentVo.id,
            images: data?.fileIds.toString()
        }).then(({ code }) => {
            if (code === 200) {
                input.value = '';
            }
            if (showUnfold.value) init(props.contentVo.id);
            else init(props.contentVo.id, 1, comments.value.total);
            //清楚原来的数据
            commentAddRO.value.comment = '';
            commentAddRO.value.replyId = undefined;
            commentAddRO.value.parentId = undefined;
            urls.value = [];
            files = [];
        });
    }

    watch(
        () => props.contentVo,
        (newVale) => {
            init(newVale.id);
        }
    );

    function init(contentId: string, current = 1, size = 3) {
        getCommentPage({
            current,
            size,
            contentId,
            orders: [{ field: 'create_time', direction: 'DESC' }]
        }).then(({ data }) => {
            comments.value = data;
            showLoading.value = false;
        });
    }

    function showAll() {
        showUnfold.value = false;
        init(props.contentVo.id, 1, comments.value.total);
    }

    function uploadImg(uploadFile: UploadFile) {
        files.push(uploadFile.raw as Blob);
        //不依赖后端文件回显
        urls.value.push(URL.createObjectURL(uploadFile.raw as Blob));
    }

    function getUrls(images: string): string[] {
        if (images) return images.split(',');
        return [];
    }

    async function chickSupport(commentPageVO: CommentPageVO) {
        await support(commentPageVO.id, commentPageVO.support);
        if (commentPageVO.support) {
            commentPageVO.kudosNum--;
        } else {
            commentPageVO.kudosNum++;
        }
        commentPageVO.support = !commentPageVO.support;
    }

    const replyName = ref();

    function replyUser(commentPageVO: CommentPageVO) {
        console.log(commentPageVO);
        commentAddRO.value.replyId = commentPageVO.createUser;
        //统一二级
        if (commentPageVO.parentId) commentAddRO.value.parentId = commentPageVO.parentId;
        else commentAddRO.value.parentId = commentPageVO.id;
        replyName.value = commentPageVO.createUserName;
    }
</script>

<style lang="scss" scoped>
    .command {
        background-color: $color-white;
        padding: 20px 20px;
    }

    .top {
        padding-bottom: 20px;
    }

    .add {
        display: flex;
    }

    .add-input {
        width: 100%;
        background-color: rgb(242, 243, 245);
        padding: 20px 20px;
        border-radius: 5px;
    }

    .command-input {
        font-family: 'Arial', sans-serif;
        vertical-align: top;
        border: 0;
        outline: none;
        width: 100%;
        resize: none;
        background-color: rgb(242, 243, 245);
        font-size: 15px;
        margin-bottom: 5px;
    }

    .command-input:focus .add-input {
        background-color: white;
    }

    .uploadImg {
        width: 64px;
        height: 64px;
        margin-right: 10px;
    }

    .send {
        display: flex;
        justify-items: center;
        align-items: center;
    }

    .command-input :deep(.el-textarea__inner) {
        background-color: rgb(242, 243, 245);
    }

    .command-input :deep(.el-input__count) {
        background-color: rgb(242, 243, 245);
    }

    .avatar {
        margin-right: 10px;
        /**
    空间不足时不缩小
   */
        flex-shrink: 0;
    }

    .command-chick-top {
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 12px;
    }

    .tap-left {
        padding-right: 10px;
        border-right: #a0a5a8 1px solid;
    }

    .tap-right {
        padding-left: 10px;
    }

    .chick {
        color: #409eff;
    }

    .command-item {
        vertical-align: top;
        display: flex;
        width: 100%;
        padding-bottom: 5px;
    }

    .command-item-top {
        font-size: 12px;
        color: rgba(3, 21, 34, 0.644);
        display: flex;
    }

    .command-item-end {
        font-size: 10px;
        padding: 5px 0;
    }

    .command-item-end-font {
        padding: 0 5px;
        font-size: 10px;
        vertical-align: middle;
    }

    .command-item-content {
        font-size: 14px;
        padding-top: 10px;
    }

    .command-item-son {
        display: flex;
        font-size: 14px;
        justify-items: center;
        align-items: flex-start;
        padding-bottom: 5px;
        width: 100%;
    }

    .command-item-son-name {
        padding-right: 10px;
        display: inline-block;
    }

    .command-item-son-content {
        padding: 0 0;
    }

    .showImage {
        width: 118px;
        height: 118px;
        padding-right: 10px;
    }

    .image {
        padding-top: 10px;
    }

    .icon {
        width: 20px;
        height: 20px;
    }

    .unfold {
        background-color: rgb(242, 243, 245);
        font-size: 14px;
        height: 50px;
        cursor: pointer;
        text-align: center;
        margin: 0 auto;
        line-height: 50px;
    }

    .unfold:hover {
        background-color: rgb(239, 239, 245);
    }

    .comment-icon {
        font-size: 15px;
        margin-left: 10px;
    }
</style>
